<template>
  <div id="invoice">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <md-scroll-view
      v-show="data.length>0"
      class="invoicehistory"
      ref="scrollView"
      :scrolling-x="false"
      :auto-reflow="true"
      @refreshing="onRefresh"
      @endReached="onLoadMore"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <ul>
        <li v-for="(items, index) in data" :key="index" @click="getToDetails(items.id)">
          <p>
            <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
            {{items.createDate}}
            <span>
              {{items.status==0 ? "待开票" : "已开票"}}
              <img src="@/assets/imgs/arrow_right.png" />
            </span>
          </p>
          <p>
            <em>{{items.orderNum}}个行程</em>
            <span>
              <b>{{items.money}}</b>元
            </span>
          </p>
        </li>
      </ul>
      <md-scroll-view-more slot="more"></md-scroll-view-more>
    </md-scroll-view>
    <div class="no_invoice" v-show="data.length<=0">
      <h6>
        <img src="@/assets/imgs/fapiao_kongbai.png" />
      </h6>
      <p>您还没有开发票记录~</p>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/snkc_xcqx_time.svg';
import {
  Tabs,
  Icon,
  Field,
  InputItem,
  Toast,
  Radio,
  Dialog,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore
} from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore
  },
  data() {
    return {
      title: '开票历史',
      data: [],
      page_no: 1,
      page_size: 20,
      no_invoice: false,
      has_next_page: true,
      IsTopbar: true
    };
  },
  mounted() {
    this.getHitoryInvoice(this.page_no, true);
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
  },
  methods: {
    // 获取当前用户所有开发票历史列表
    getHitoryInvoice(page, isFirst) {
      var param = {
        page_no: page, // 页码
        page_size: this.page_size, // 每页显示多少条
        query_type: 2 // 开票历史
      };
      Loading.show();
      http.post('pakj/invoice/getHitoryInvoice', param).then(res => {
        Loading.hide();
        this.$refs.scrollView.finishRefresh();
        this.$refs.scrollView.finishLoadMore();
        if (res.data.code === '000000') {
          console.log(res.data.data);
          if (res.data.data.length === 0) {
            this.has_next_page = false;
          } else {
            for (var i = 0; i < res.data.data.length; i++) {
              res.data.data[i].createDate = moment(res.data.data[i].createDate).format(
                'YYYY-MM-DD dddd HH:mm'
              );
              this.data.push(res.data.data[i]);
            }
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    onRefresh() {
      this.data = [];
      this.page_no = 1;
      this.has_next_page = true;
      this.getHitoryInvoice(this.page_no);
    },
    onLoadMore() {
      if (this.has_next_page) {
        this.page_no += 1;
        this.getHitoryInvoice(this.page_no);
      } else {
        this.$refs.scrollView.finishLoadMore();
      }
    },
    getToDetails(id) {
      this.$router.push({
        name: 'invoiceDetails',
        query: {
          invoiceId: id
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#invoice {
  height: 100vh;
  background-color: color-primary-background;

  .invoicehistory {
    height: calc(100vh - 108px);
    background-color: color-primary-background;
  }
}

.invoicehistory ul li {
  padding: 10px 30px 30px 30px;
  position: relative;
  color: #333;
  background-color: #fff;
  margin-top: 20px;
}

.invoicehistory ul li p {
  color: #333;
  font-size: 28px;
  margin-top: 20px;
}

.invoicehistory ul li em {
  margin-left: 10px;
  font-style: normal;
}

.invoicehistory ul li p span {
  float: right;
  color: #999;
  font-size: 26px;
}

.invoicehistory ul li p span img {
  width: 15px;
  height: 20px;
  margin-left: 20px;
}

.invoicehistory ul li p span b {
  font-size: 36px;
  color: #333;
  font-weight: 400;
}

.snkc_xcqx_time {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.no_invoice {
  position: absolute;
  top: 35%;
  left: 20%;
  z-index: 2;
}

.no_invoice h6 {
  text-align: center;
}

.no_invoice h6 img {
  width: 60%;
}

.no_invoice p {
  text-align: center;
  margin-top: 30px;
  font-size: 28px;
  color: #666;
}
</style>
